<template>
  <el-dialog title="详情"
             :close-on-click-modal="false" append-to-body
             :visible.sync="visible" class="JNPF-dialog JNPF-dialog_center" lock-scroll
             width="60%">
    <el-row :gutter="60" class=" main" :style="{margin: '0 auto',width: '100%'}">
      <el-form ref="formRef" :model="dataForm" :rules="dataRule" size="medium" label-width="100px"
               label-position="top">
        <template v-if="!loading">
          <!-- 具体表单 -->
          <el-col :span="24" class="quarterly-main">
            <el-row :gutter="30">
              <el-col :span="24">
                <jnpf-form-tip-item>
                  <JnpfText
                    :textStyle='{"color":"#1684FC","font-weight":"bold","text-decoration":"none","font-size":24,"line-height":32,"font-style":"normal","text-align":"center"}'
                    content="季度进度填报">
                  </JnpfText>
                </jnpf-form-tip-item>
              </el-col>
              <el-col :span="12">
                <jnpf-form-tip-item
                  label="企业名称" prop="enterpriseName">
                  <JnpfInput v-model="dataForm.enterpriseName" @change="changeData('enterpriseName',-1)"
                             placeholder="请输入" readonly clearable :style='{"width":"100%"}'>
                  </JnpfInput>
                </jnpf-form-tip-item>
              </el-col>
<!--              <el-col :span="12">
                <jnpf-form-tip-item
                  label="企业信用代码" label-width="120px" prop="enterpriseCreditCode">
                  <JnpfInput v-model="dataForm.enterpriseCreditCode" @change="changeData('enterpriseCreditCode',-1)"
                             placeholder="请输入" readonly clearable :style='{"width":"100%"}'>
                  </JnpfInput>
                </jnpf-form-tip-item>
              </el-col>-->
              <el-col :span="12">
                <jnpf-form-tip-item
                  label="项目名称" prop="projectName">
                  <JnpfInput v-model="dataForm.projectName" @change="changeData('projectName',-1)"
                             placeholder="请输入" readonly clearable :style='{"width":"100%"}'>
                  </JnpfInput>
                </jnpf-form-tip-item>
              </el-col>
<!--              <el-col :span="12">
                <jnpf-form-tip-item
                  label="服务商名称" prop="serverName">
                  <JnpfInput v-model="dataForm.serverName" @change="changeData('serverName',-1)"
                             placeholder="请输入" readonly clearable :style='{"width":"100%"}'>
                  </JnpfInput>
                </jnpf-form-tip-item>
              </el-col>
              <el-col :span="12">
                <jnpf-form-tip-item
                  label="服务商统一社会信用代码" label-width="185px" prop="serverCreditCode">
                  <JnpfInput v-model="dataForm.serverCreditCode" @change="changeData('serverCreditCode',-1)"
                             placeholder="请输入" readonly clearable :style='{"width":"100%"}'>
                  </JnpfInput>
                </jnpf-form-tip-item>
              </el-col>
              <el-col :span="12">
                <jnpf-form-tip-item
                  label="项目负责人" prop="projectLeader">
                  <JnpfInput v-model="dataForm.projectLeader" @change="changeData('projectLeader',-1)"
                             placeholder="请输入" readonly clearable :style='{"width":"100%"}'>
                  </JnpfInput>
                </jnpf-form-tip-item>
              </el-col>
              <el-col :span="12">
                <jnpf-form-tip-item
                  label="联系电话" prop="phone">
                  <JnpfInput v-model="dataForm.phone" @change="changeData('phone',-1)"
                             placeholder="请输入" readonly clearable :style='{"width":"100%"}'>
                  </JnpfInput>
                </jnpf-form-tip-item>
              </el-col>
              <el-col :span="12">
                <jnpf-form-tip-item
                  label="开始时间" prop="startDate">
                  <JnpfDatePicker v-model="dataForm.startDate" @change="changeData('startDate',-1)"
                                  :startTime="dateTime(false,1,1,'','')" :endTime="dateTime(false,1,1,'','')"
                                  placeholder="请选择" readonly :style='{"width":"100%"}' type="date"
                                  format="yyyy-MM-dd">
                  </JnpfDatePicker>
                </jnpf-form-tip-item>
              </el-col>
              <el-col :span="12">
                <jnpf-form-tip-item
                  label="结束时间" prop="endDate">
                  <JnpfDatePicker v-model="dataForm.endDate" @change="changeData('endDate',-1)"
                                  :startTime="dateTime(false,1,1,'','')" :endTime="dateTime(false,1,1,'','')"
                                  placeholder="请选择" readonly :style='{"width":"100%"}' type="date"
                                  format="yyyy-MM-dd">
                  </JnpfDatePicker>
                </jnpf-form-tip-item>
              </el-col>
              <el-col :span="12">
                <jnpf-form-tip-item
                  label="区县" label-width="70px" prop="county">
                  <JnpfSelect v-model="dataForm.county" @change="changeData('county',-1)"
                              placeholder="请选择" clearable :style='{"width":"100%"}' :options="countyOptions"
                              :props="countyProps">
                  </JnpfSelect>
                </jnpf-form-tip-item>
              </el-col>
              <el-col :span="12">
                <jnpf-form-tip-item
                  label="数字化改造产品或服务预算（万元）" label-width="255px" prop="digitalBudgetTotal">
                  <JnpfInput v-model="dataForm.digitalBudgetTotal" @change="changeData('digitalBudgetTotal',-1)"
                             placeholder="请输入" addonAfter="万元" readonly clearable :style='{"width":"100%"}'>
                  </JnpfInput>
                </jnpf-form-tip-item>
              </el-col>
              <el-col :span="24" :style='{"padding":"0px"}'>
                <el-col :span="12">
                  <jnpf-form-tip-item
                    label="其他支出项预算 （万元）" label-width="190px" prop="otherDigitalTotal">
                    <JnpfInput v-model="dataForm.otherDigitalTotal" @change="changeData('otherDigitalTotal',-1)"
                               placeholder="请输入" addonAfter="万元" readonly clearable :style='{"width":"100%"}'>
                    </JnpfInput>
                  </jnpf-form-tip-item>
                </el-col>
                <el-col :span="12">
                  <jnpf-form-tip-item
                    label="总预算 （万元）" label-width="135px" prop="generalBudget">
                    <JnpfInput v-model="dataForm.generalBudget" @change="changeData('generalBudget',-1)"
                               placeholder="请输入" addonAfter="万元" readonly clearable :style='{"width":"100%"}'>
                    </JnpfInput>
                  </jnpf-form-tip-item>
                </el-col>
              </el-col>-->
              <el-col :span="12">
                <jnpf-form-tip-item
                  label="项目当季完成投资金额 （万元）" label-width="230px" prop="projectInseasonInvestment">
                  <JnpfInputNumber v-model="dataForm.projectInseasonInvestment" readonly disabled
                                   @change="changeData('projectInseasonInvestment',-1)"
                                   placeholder="请输入" addonAfter="万元" :step="1" :controls="false">
                  </JnpfInputNumber>
                </jnpf-form-tip-item>
              </el-col>
              <el-col :span="12">
                <jnpf-form-tip-item
                  label="项目累计完成投资金额 （万元）" label-width="230px" prop="projectTotalInvestment">
                  <JnpfInputNumber v-model="dataForm.projectTotalInvestment" disabled
                                   @change="changeData('projectTotalInvestment',-1)"
                                   placeholder="请输入" addonAfter="万元" :step="1" :controls="false">
                  </JnpfInputNumber>
                </jnpf-form-tip-item>
              </el-col>
              <el-col :span="24">
                <jnpf-form-tip-item
                  label="项目形象进度" prop="projectImageProgress">
                  <JnpfTextarea v-model="dataForm.projectImageProgress"
                                @change="changeData('projectImageProgress',-1)"
                                placeholder="请输入" :style='{"width":"100%"}' true type="textarea"
                                :autosize='{"minRows":4,"maxRows":4}' readonly>
                  </JnpfTextarea>
                </jnpf-form-tip-item>
              </el-col>
              <el-col :span="24">
                <jnpf-form-tip-item
                  label="需协调解决的问题" label-width="130px" prop="solverProblem">
                  <JnpfEditor v-model="dataForm.solverProblem" @change="changeData('solverProblem',-1)"
                              placeholder="请输入" :style='{"width":"100%"}' readonly>
                  </JnpfEditor>
                </jnpf-form-tip-item>
              </el-col>
            </el-row>
          </el-col>
          <!-- 表单结束 -->
        </template>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false"> 取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import request from "@/utils/request";
import {getBeforeData, getBeforeTime, getDateDay, getLaterData, getLaterTime} from "@/components/Generator/utils";

export default {
  name: "ProgressDetail",
  data() {
    return {
      visible: false,
      loading: false,
      formRef: 'formRef',
      dataForm: {
        projectName: undefined,
        startDate: undefined,
        endDate: undefined,
        enterpriseName: undefined,
        enterpriseCreditCode: undefined,
        serverName: undefined,
        serverCreditCode: undefined,
        projectLeader: undefined,
        phone: undefined,
        county: undefined,
        digitalBudgetTotal: undefined,
        otherDigitalTotal: undefined,
        generalBudget: undefined,
        projectInseasonInvestment: undefined,
        projectTotalInvestment: undefined,
        projectImageProgress: undefined,
        solverProblem: undefined,
        creatoruserid: undefined,
        creatortime: undefined,
        lastmodifyuserid: undefined,
        lastmodifytime: undefined,
        projectId: undefined,
      },
      dataRule:
        {
          projectName: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          startDate: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            },
          ],
          endDate: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            },
          ],
          enterpriseName: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          enterpriseCreditCode: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          serverName: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          serverCreditCode: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          projectLeader: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          phone: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          county: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            },
          ],
          digitalBudgetTotal: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          otherDigitalTotal: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          generalBudget: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          projectInseasonInvestment: [
            {
              required: true,
              message: '请输入',
              trigger: ["blur", "change"]
            },
          ],
          projectTotalInvestment: [
            {
              required: true,
              message: '请输入',
              trigger: ["blur", "change"]
            },
          ],
          projectImageProgress: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          solverProblem: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
        },
      countyOptions: [{"fullName": "鼓楼区", "id": "鼓楼区"}, {"fullName": "台江区", "id": "台江区"}, {
        "fullName": "仓山区",
        "id": "仓山区"
      }, {"fullName": "马尾区", "id": "马尾区"}, {"fullName": "晋安区", "id": "晋安区"}, {
        "fullName": "长乐区",
        "id": "长乐区"
      }, {"fullName": "闽侯县", "id": "闽侯县"}, {"fullName": "连江县", "id": "连江县"}, {
        "fullName": "罗源县",
        "id": "罗源县"
      }, {"fullName": "闽清县", "id": "闽清县"}, {"fullName": "平潭县", "id": "平潭县"}, {
        "fullName": "福清市",
        "id": "福清市"
      }, {"fullName": "高新区", "id": "高新区"}],
      countyProps: {"label": "fullName", "value": "id"},
      childIndex: -1,
      isEdit: false,
      interfaceRes: {
        projectName: [],
        startDate: [],
        endDate: [],
        enterpriseName: [],
        enterpriseCreditCode: [],
        serverName: [],
        serverCreditCode: [],
        projectLeader: [],
        phone: [],
        county: [],
        digitalBudgetTotal: [],
        otherDigitalTotal: [],
        generalBudget: [],
        projectInseasonInvestment: [],
        projectTotalInvestment: [],
        projectImageProgress: [],
        solverProblem: [],
        creatoruserid: [],
        creatortime: [],
        lastmodifyuserid: [],
        lastmodifytime: [],
        projectId: [],
      },
    }
  },
  created() {
  },
  methods: {
    init(id) {
      this.visible = true;
      this.dataForm.id = id || 0;
      request({
        url: '/api/example/Fz_no_flow_project_quarterly_progress/' + this.dataForm.id,
        method: 'get'
      }).then(res => {
        this.dataForm = res.data
        this.loading = false
      });
    },
    dateTime(timeRule, timeType, timeTarget, timeValueData, dataValue) {
      let timeDataValue = null;
      let timeValue = Number(timeValueData)
      if (timeRule) {
        if (timeType == 1) {
          timeDataValue = timeValue
        } else if (timeType == 2) {
          timeDataValue = dataValue
        } else if (timeType == 3) {
          timeDataValue = new Date().getTime()
        } else if (timeType == 4) {
          let previousDate = '';
          if (timeTarget == 1 || timeTarget == 2) {
            previousDate = getDateDay(timeTarget, timeType, timeValue)
            timeDataValue = new Date(previousDate).getTime()
          } else if (timeTarget == 3) {
            previousDate = getBeforeData(timeValue)
            timeDataValue = new Date(previousDate).getTime()
          } else {
            timeDataValue = getBeforeTime(timeTarget, timeValue).getTime()
          }
        } else if (timeType == 5) {
          let previousDate = '';
          if (timeTarget == 1 || timeTarget == 2) {
            previousDate = getDateDay(timeTarget, timeType, timeValue)
            timeDataValue = new Date(previousDate).getTime()
          } else if (timeTarget == 3) {
            previousDate = getLaterData(timeValue)
            timeDataValue = new Date(previousDate).getTime()
          } else {
            timeDataValue = getLaterTime(timeTarget, timeValue).getTime()
          }
        }
      }
      return timeDataValue;
    },
    changeData(model, index) {
      this.isEdit = false
      this.childIndex = index
      let modelAll = model.split("-");
      let faceMode = "";
      for (let i = 0; i < modelAll.length; i++) {
        faceMode += modelAll[i];
      }
      for (let key in this.interfaceRes) {
        if (key != faceMode) {
          let faceReList = this.interfaceRes[key]
          for (let i = 0; i < faceReList.length; i++) {
            if (faceReList[i].relationField == model) {
              let options = 'get' + key + 'Options';
              if (this[options]) {
                this[options]()
              }
              this.changeData(key, index)
            }
          }
        }
      }
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .is-disabled .el-input__inner,
::v-deep .is-disabled .el-radio__label,
::v-deep .is-disabled .el-radio__input,
::v-deep .is-disabled .el-checkbox__input,
::v-deep .is-disabled .el-checkbox__label{
  background-color: #ffffff !important;
  cursor: not-allowed !important;
  color: #606266 !important;
}

::v-deep .ql-toolbar.ql-snow {
  padding:0px;

  .ql-formats {
    display: none;
  }
}
</style>
